<template>
    <div :class="`tech-choose-count ${mode} ${styleMode}`">
        <!-- <div class="inventory">剩余库存 {{storageValue}} {{unit}}</div> -->
        <div class="inventory"></div>
        <CountControl :count="count" :isDisable="false" @minus="minusCount" @add="addCount" :mode="mode" theme="#333333" :styleMode="styleMode" />
    </div>
</template>

<script>
import { MiniIcon } from '@components/base';
import { CountControl } from '@components/shop';
import ModeMixin from '@common/mixin';
export default {
    name: 'ChooseCount', // 选择数量
    mixins: [ModeMixin],
    components: {
        MiniIcon,
        CountControl,
    },
    props: {
        unit: {
            type: String,
            default: '件',
        },
        storage: {
            type: Number,
            default: -1,
        },
        defaultCount: {
            type: Number,
            default: 1,
        },
    },
    data() {
        return {
            count: 1,
        };
    },
    computed: {
        storageValue() {
            const { storage } = this.$props;
            return storage === -1 ? '无限量' : storage;
        },
    },
    methods: {
        addCount() {
            const { storage } = this.$props;
            if (storage === -1) {
                this.count++;
            } else {
                this.count < storage && this.count++;
            }
            this.$emit('countChange', this.count);
        },
        minusCount() {
            this.count > 1 ? this.count-- : this.count = 1;
            this.$emit('countChange', this.count);
        },
    },
};
</script>

<style lang="less">
.tech-choose-count {
    .flex-row-between();
    .mode-white();
    align-items: center;
    .inventory {
        color: rgba(125,125,131,0.7);
        font-size: @font-size;
    }
}
</style>
